<template>
	<view class="page">
		<view class="section-bp margin-bottom-sm" v-for="(item,index) in deatilList">
			<view class="home-date-title padding-m">
				<text class="home-title-left cr-base">{{item.voucherDate}}</text>
			</view>
			<view>
				<view style="color: #cccccc;" class="text-size-xs">
					<view class="home-title padding-m">
						<view>
							<span v-if="item.balanceDirection === '平'"
								class="flat circle margin-left-xl padding-right-xs padding-left-xs">平</span>
							<span v-else-if="item.balanceDirection === '贷'"
								class="total-credit circle margin-left-xl padding-right-xs padding-left-xs">贷</span>
							<span v-else-if="item.balanceDirection === '借'"
								class="debit circle margin-left-xl padding-right-xs padding-left-xs">借</span>
						</view>
						<view class="flex-2 margin-left-xl">
							<view style="color: #000000;" class="br-b-f5 .padding-bottom-sm">借方:{{numFilter(item.debitAmount)}}</view>
							<view style="color: #000000;" class="padding-top-sm">贷方:{{numFilter(item.creditAmount)}}</view>
						</view>
						<view class="flex-3 tr">{{item.summary}}</view>
						<!-- <uni-icons type="right" size="14"></uni-icons> -->
					</view>
				</view>
			</view>
			<view class="home-date-title padding-m">
				<text class="home-title-left cr-base">余额:{{numFilter(item.balance)}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			deatilList: {
				type: Array,
				default: []
			},
		},
		data() {
			return {

			};
		},
		methods: {
			numFilter(value) {
				if (value || value === 0) {
					let realVal = parseFloat(value).toFixed(2)
					return realVal
				} else {
					return '-'
				}
			},
		}
	}
</script>

<style>
	.page {
		background-color: rgba(246, 247, 248, 1);
		position: relative;
		overflow: hidden;
	}

	.section {
		background-color: rgba(255, 255, 255, 1);
		padding: 10rpx 20rpx;
		margin-bottom: 30rpx;
	}
</style>